<h1>User Activity</h1>

<div class="spinner big" ng-show="vm.loading">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>


<hr/>

<div class="row">
  <div class="col-sm-6">
    <h4>Filter</h4>
    <select class="form-control input-sm" ng-model="vm.filter.user" ng-options="user as user.username for user in vm.users"
            ng-change="vm.onUserSelect()">
      <option value="">---All Users---</option>
    </select>
  </div>
  <div class="col-sm-6">
    <h4>Sort</h4>
    <select class="form-control input-sm" ng-model="vm.currentSort"
            ng-options="sortOption.key as sortOption.label for sortOption in vm.sortOptions"
            ng-change="vm.onSortChange()">
    </select>
  </div>
</div>

<br>

<uib-tabset active="activePill">
  <uib-tab index="0" heading="Login Activity" ng-click="vm.changeType('login')">

    <table class="table table-striped">
      <thead>
      <tr>
        <td>User</td>
        <td>date Created</td>
        <td>Device</td>
        <td>Operating System</td>
        <td>Browser</td>
        <td>IP Address</td>
      </tr>
      </thead>
      <tr ng-repeat="activity in vm.userActivity.list">
        <td>{{activity.username}} <span class="opacity-50 text-sm">(id: {{activity.userId}})</span></td>
        <td>{{activity.dateCreated | date:'short'}}</td>
        <td>{{activity.device}}</td>
        <td>{{activity.operatingSystem}}</td>
        <td>{{activity.browser}}</td>
        <td>{{activity.ipAddress}}</td>
      </tr>
    </table>

    <ul uib-pagination ng-if="vm.userActivity.list.length < vm.userActivity.total"
        max-size="7" force-ellipses="true"
        boundary-links="true" total-items="vm.userActivity.total"
        ng-model="vm.pagination.currentPage" ng-change="vm.pagination.onChange()"></ul>

  </uib-tab>
  <uib-tab index="1" heading="Video Activity" ng-click="vm.changeType('video')">

    <table class="table table-striped">
      <thead>
      <tr>
        <td>User</td>
        <td>last viewed</td>
        <td>Video</td>
        <td>Play</td>
        <td>Device</td>
        <td>Operating System</td>
        <td>Browser</td>
        <td>IP Address</td>
      </tr>
      </thead>
      <tr ng-repeat="activity in vm.userActivity.list">
        <td>{{activity.username}} <span class="opacity-50 text-sm">(id: {{activity.userId}})</span></td>
        <td>{{(activity.lastUpdated || activity.dateCreated) | date:'short'}}</td>
        <td style="width: 185px;">
          <img ng-if="activity.video.poster_path || activity.video.show.poster_path"
               ng-src="https://image.tmdb.org/t/p/w92/{{activity.video.show.poster_path || activity.video.poster_path}}"
               style="max-width: 50px; margin-right: 10px; float: left;"/>
            <div>{{activity.video.title || activity.video.name}}</div>
            <div class="text-muted" ng-if="activity.video.canonicalName === 'streama.Episode'">s{{activity.video.season_number| padnumber:2}}e{{activity.video.episode_number | padnumber:2}}</div>
            <div class="text-muted">({{(activity.video.show.first_air_date || activity.video.release_date).substring(0,4)}})</div>
        </td>

        <td >
          <a class="ion-android-arrow-dropright-circle"
             style="font-size: 30px"
             ui-sref="player({videoId: activity.video.id})"></a>
        </td>
        <td>{{activity.device}}</td>
        <td>{{activity.operatingSystem}}</td>
        <td>{{activity.browser}}</td>
        <td>{{activity.ipAddress}}</td>
      </tr>
    </table>

    <ul uib-pagination ng-if="vm.userActivity.list.length < vm.userActivity.total"
        max-size="7" force-ellipses="true"
        boundary-links="true" total-items="vm.userActivity.total"
        ng-model="vm.pagination.currentPage" ng-change="vm.pagination.onChange()"></ul>

  </uib-tab>
</uib-tabset>





